<!-- 封装卡片 -->
<template>
  <div
    class="my-cark"
    :style="{ width: myStyle.width, height: myStyle.height }"
  >
    <div class="main">
      <div class="my-cark-header">
        <div class="header-title">{{ dataList.title }}</div>
        <div class="header-unit">{{ dataList.unit }}</div>
      </div>
      <div class="my-cark-main">
        <div
          class="cark-main-list"
          v-for="(item, index) in dataList.dataList"
          :key="index"
        >
          <div class="rank">
            <img :src="item.img" alt="" v-if="item.img" />
            <span class="rank-title" v-if="item.rank">{{ item.rank }}</span>
          </div>

          <div class="name" :style="{ color: item.myColor }">
            {{ item.name }}
          </div>
          <div class="main-list-box">
            <div class="single" :style="{ color: item.myColor }">
              {{ item.single }}
            </div>
            <div
              class="arrow"
              v-if="item.contrast_last_day == 1 ? true : false"
            >
              <div class="arrow-one"></div>
              <div class="arrow-two"></div>
            </div>
            <div
              class="arrow"
              v-if="item.contrast_last_day == 2 ? true : false"
            >
              <div class="arrow-one2"></div>
              <div class="arrow-two2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-cark",
  props: {
    dataList: { type: Object, default: () => ({}) },
    myStyle: { type: Object, default: () => ({}) },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped >
.my-cark {
  margin-top: 10px;
  width: 97% !important;
  height: 18.0625rem;
  background: rgba(16, 27, 168, 0.15);
  border: 2px solid;
  border-image: linear-gradient(-90deg, #070f63, #3d61f3) 2 2;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  .main {
    width: 90%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .my-cark-header {
      height: 20%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .header-unit,
      .header-title {
        font-size: 1.125rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #d2e7ff;
        line-height: 19px;
      }
    }
    .my-cark-main {
      height: 80%;
      width: 100%;
      .cark-main-list {
        height: 20%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #006273;
      }
    }
  }
}
.rank {
  width: 26px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-content: center;
  &-title {
    width: 100%;
    height: 100%;
    background: #081a54;
    border: 1px solid #183f60;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #d2e7ff;
    display: flex;
    justify-content: center;
  }
}
.name {
  font-size: 1rem;
  font-family: PingFang SC;
  font-weight: 400;
  opacity: 0.8;
  width: 60%;
  color: #9ec7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.single {
  font-size: 1rem;
  font-family: PingFang SC;
  font-weight: 400;
  margin-right: 10%;

  color: #00fcf9;
}
.main-list-box {
  width: 20%;
  display: flex;
  justify-content: space-around;
}
.arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  flex-wrap: wrap;
  // border: 1px solid #3d61f3;
}
.arrow-one {
  width: 0;
  height: 0;
  border-bottom: 8px solid #00fcf9;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.arrow-two {
  width: 4px;
  height: 8px;
  background: #00fcf9;
}
.arrow-one2 {
  width: 4px;
  height: 8px;
  background: #ff3b59;
}
.arrow-two2 {
  // width: 12px;
  // height: 6px;
  // background: #ff3b59;
  // border-radius: 1px;
  width: 0;
  height: 0;
  border-top: 8px solid #ff3b59;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
</style>